<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		#container {
			display: grid;
			grid-template-columns: [col1] 100px [col2] 100px [col3] 100px [col4];
			grid-template-rows: [row1] 100px [row2] 100px [row3] 100px [row4];
		}

		.item {
			font-size: 4em;
			text-align: center;
			border: 1px solid #e5e4e9;
		}

		.item-1 {
			background-color: #ef342a;
			/* grid-column-start: col1;
			grid-column-end: col3;
			grid-row-start: row1;
			grid-row-end: row2; */
			grid-area: row1 / col1 / row / col3;
		}

		.item-2 {
			background-color: #f68f26;
			/* grid-column-start: col3;
			grid-column-end: col4;
			grid-row-start: row1;
			grid-row-end: row4; */
			grid-area: row1 / col3 / row 4 / col4;
		}

		.item-3 {
			background-color: #4ba946;
			/* grid-column-start: col1;
			grid-column-end: col3;
			grid-row-start: row2;
			grid-row-end: row4; */
			grid-area: row2 / col1 / row4 / col3;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="item item-1">1</div>
		<div class="item item-2">2</div>
		<div class="item item-3">3</div>
	</div>
</body>

</html>